<template>
  <div class="analysispage">
    <div class="pagetop">
      <div class="sales">
        <span>本月</span>
        <h2>付款总金额</h2>
        <p>￥{{ sales }}</p>
      </div>
      <div class="orders">
        <span>本月</span>
        <h2>成交订单数</h2>
        <p>{{ orders }}</p>
      </div>
      <div class="buyers">
        <div class="circlechart">
          <el-progress
            type="circle"
            :percentage="Number(percentage)"
            :stroke-width="15"
            text-color="#fff"
            stroke-linecap="square"
            color="#fff"
            define-back-color="#b8c0fa"
          ></el-progress>
        </div>
        <span>本月</span>
        <h2>成交买家数</h2>
        <p>{{ buyers }}</p>
      </div>
      <div class="products">
        <div class="circlechart">
          <el-progress
            type="circle"
            :percentage="percentage"
            :stroke-width="15"
            text-color="#fff"
            stroke-linecap="square"
            color="#fff"
            define-back-color="#d7b9f6"
          ></el-progress>
        </div>
        <span>本月</span>
        <h2>付款商品数</h2>
        <p>{{ products }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { customAlphabet } from "nanoid";

export default {
  name: "TopCharts",
  components: {},
  data() {
    return {
      sales: "",
      orders: "",
      buyers: "",
      products: "",
      percentage: 0,
    };
  },
  mounted() {
    const nanoid = customAlphabet("123456789", 6);
    this.sales = nanoid();
    this.orders = nanoid();
    this.buyers = nanoid();
    this.products = nanoid();
    setInterval(() => {
      this.sales++;
      this.orders++;
      this.buyers++;
      this.products++;
      if (this.percentage == 100) {
        this.percentage = 0;
      } else {
        this.percentage++;
      }
    }, 500);
  },
};
</script>

<style scoped lang="scss">
.analysispage {
  padding-right: 20px;
  .pagetop {
    margin-top: 40px;
    display: flex;
    justify-content: space-around;
    .sales {
      background: url("@/assets/sales.png");
      background-size: 100% 100%;
    }
    .orders {
      background: url("@/assets/orders.png");
      background-size: 100% 100%;
    }
    .buyers {
      background: url("@/assets/buyers.png");
      background-size: 100% 100%;
    }
    .products {
      background: url("@/assets/products.png");
      background-size: 100% 100%;
    }
  }
  .pagetop > div {
    width: 320px;
    height: 150px;
    background: pink;
    border-radius: 10px;
    display: flex;
    position: relative;
    // flex-direction: column;
  }
  .pagetop > div > h2 {
    font-weight: normal;
    font-size: 16px;
    color: #fff;
    margin: 10px;
  }
  .pagetop > div > span {
    color: #fff;
    position: relative;
    top: 70px;
    left: 140px;
  }
  .pagetop > div > p {
    font-size: 30px;
    font-weight: 600;
    color: #fff;
    align-self: flex-end;
    margin: 0 0 15px 0px;
  }
  // top圆形图标
  .circlechart {
    position: absolute;
    top: 52px;
    left: 20px;
  }
}
:deep(.el-progress-circle) {
  width: 90px !important;
  height: 90px !important;
}
</style>
